<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>节点练习 - 替换节点</title>
  </head>

  <body>
    <div id="three" class="three">
      我是three内容
      <ol>
        <li>简简单单的早餐</li>
        <li>简简单单的午饭</li>
        <li>简简单单的晚饭</li>
        <li>西瓜</li>
        <li>哈密瓜</li>
      </ol>
    </div>
    将第一个节点内容替换为新建节点
    <button onclick="btn_move_one()">替换新建节点</button>
    <br />
    将第二个节点替换为第四个节点
    <button onclick="btn_move_two()">替换已有节点</button>
    <script>
      x = document.getElementById("three").getElementsByTagName("ol")[0];

      //新建标签节点
      let para = document.createElement("li");
      //新建文本节点
      let txt = document.createTextNode("牛奶当早餐");
      //组合
      para.appendChild(txt);

      //替换新建节点
      const btn_move_one = () => {
        y = x.children[1]; //获取到第二个li节点
        x.replaceChild(para, y);
      };
      //替换已有节点
      const btn_move_two = () => {
        y = x.children[1]; //获取到第二个li节点
        z = x.children[3]; //获取到第四个li节点
        console.log(z);
        x.replaceChild(z, y); //将第二个节点替换为第四个节点
      };
    </script>
  </body>
</html>
